<template>
  <e-table
    ref="eTable"
    @getList="handleGetList"
    :tableData="tableData"
    :columns="columns"
    :loading="loading"
    :total="total"
  >
    <el-table-column slot="name" label="门禁设备" align="center">
      <template slot-scope="scope">
        <el-button type="text" @click="handleClick(scope.row)">{{ scope.row.accessName }}</el-button>
      </template>
    </el-table-column>
    <el-table-column slot="action" fixed="right" width="50" align="center">
      <template slot-scope="scope">
        <el-dropdown>
          <a class="el-dropdown-link">
            <i class="el-icon-menu"></i>
          </a>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="$auth('assets:update')" @click="handleEdit(true, scope.row)">
              <a>编辑</a>
            </el-dropdown-item>
            <el-dropdown-item @click.native="handleDelete(scope.row)" v-if="$auth('assets:delete')">
              <a class="red">删除</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </e-table>
</template>

<script>
import { assetsAccessPage, assetsAccessDelete } from '@/api/assetsNew'
import { openNotification } from '@/utils/util'

export default {
  data() {
    return {
      tableData: [],
      total: 1,
      loading: false,
      columns: [
        { slot: 'name' },
        {
          label: '监听端口',
          prop: 'listenerPort'
        },
        {
          label: '预警间隔时间',
          prop: 'warnInterval'
        },
        { slot: 'action' }
      ],
      queryParam: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    handleClick(row) {
      console.log('row', row)
      this.$emit('rightFresh', row)
    },
    handleEdit(bool, row) {
      this.$emit('edit', bool, row)
    },
    handleDelete(row) {
      console.log('row', row)
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.accessName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await assetsAccessDelete(row.accessId, {})
          openNotification('success', '删除成功')
          const index = _this.tableData.findIndex(v => v.accessId === row.accessId)
          _this.tableData.splice(index, 1)
        }
      })
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await assetsAccessPage(this.queryParam)

      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>
